<template>
  <view class="page account">
    <view class="account-info">
      <van-cell title="昵称" is-link :value="black_Get(info,'nickname')" />
      <van-cell title="手机号码" is-link :value="black_Get(info, 'mobile')"
        @tap="nav('/subpackage/member/pages/account/mobile/index')" />
      <van-cell title="登录密码" is-link value="更改密码" :border="false"
        @tap="nav('/subpackage/member/pages/account/password/index')" />
      <van-cell title="实名认证" is-link :value="info._raw.isCertificate ? '已认证' : '未认证'" :border="false"
        custom-class="authentication" url="/subpackage/member/pages/certificate/index" />
    </view>
    <view class="btm-btn box-gap">
      <button class="logout-btn" @tap="doLogout">退出登录</button>
    </view>
    <van-dialog id="van-dialog"></van-dialog>
  </view>
</template>

<script>
  import {
    mapActions,
    mapState
  } from 'vuex';
  import EventBus from "@/event/index";
  export default {
    onLoad() {
      EventBus.$on("cancelCertificate", (value) => {
        this.cancelCertificate = value
      });
    },
    onShow() {
      if (this.cancelCertificate) {
        this.cancelCertificate = false;
        this.toast('已成功取消实名认证绑定');
      }
    },
    components: {},
    computed: {
      ...mapState('user', ['info']),
      birthday() {
        return this.info._raw.birthday ? this.$dayjs(this.info._raw.birthday).format('YYYY-MM-DD') : '--';
      }
    },
    data() {
      return {
        startDay: new Date(1949, 10, 1).getTime(),
        currentDate: new Date().getTime(),
        popupShow: false,
      }
    },
    methods: {
      ...mapActions('user', ['getUserInfo']),
      ...mapActions('user', ['logout']),
      doLogout() {
        this.vdialog.confirm({
          message: '退出当前账户，是否继续？'
        }).then(() => {
          uni.hideLoading()
          this.logout().then(() => {
            this.red('/pages/login/index')
          });
          this.red('/pages/login/index')
        }).catch((e) => {
          console.error(e);
        });
      }
    }
  };
</script>
<style lang="less" scoped>
  .account {
    .flexLayout(@dir: column);
    min-height: 100vh;
    background: #F7F7F7;

    .account-info {
      flex: 1;

      /deep/ .van-cell {
        &__title {
          font-size: 32rpx;
          font-weight: 500;
          color: #000000;
        }
      }

      /deep/ .authentication {
        margin-top: 30rpx;
      }
    }

    .logout-btn {
      height: 90rpx;
      margin-bottom: 109rpx;
      font-size: 30rpx;
      color: #DB187C;
      line-height: 90rpx;
      background: #FFE5F3;
      border-radius: 10rpx;

      &:active {
        filter: brightness(0.8);
      }

      &::after {
        border: none;
      }
    }

    .address {
      display: flex;
      padding: @box-gap;

      &-input {
        flex: 1;
        width: 100%;
        padding: 20rpx;
        border: 1px solid #e6e6e6;
        box-sizing: border-box;
      }
    }

    .id-card {
      padding: @box-gap;

      &-input {
        border: 1px solid #e6e6e6;
      }
    }
  }
</style>